<template>
	<view>
		<view class="indexDatas flex align-center flex-direction">
			<text style="margin-top: 30upx;font-size: 28upx;">请手持身份证人像面并上传照片</text>
			<text style="font-size: 28upx;">完善身份信息</text>
			<image class="rzBg" @click="chooseImg" v-if="!src" src="/static/image/rzBg.png"></image>
			<view class="rzBg uploadBox" v-else>
				<image mode="aspectFit" @click="previewImg(src)" :src="src"></image>
				<image class="closeImg" v-if="state == 999 || state ==2" @click="closeImg" src="/static/image/close.png"></image>
			</view>
			<image class="testImg" src="/static/image/test.png"></image>
			<text>上传示例</text>
			<view class="inputTitle">真实姓名</view>
			<input class="passwordBox" placeholder="真实姓名" v-model="name" placeholder-style="color:#999" />
			<view class="inputTitle">身份证号码</view>
			<input class="passwordBox" placeholder="身份证号码" v-model="code" placeholder-style="color:#999" />
			<button class="buyBtn" @click="subAuth">确定</button>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				src: '',
				name:'',
				code:'',
				state:999 //0审核中  1通过  2驳回 
			}
		},
		onLoad(op) {
			
		},
		methods: {
			getData(){
				post('member/member/get_auth', {}, true, res => {
					if(res.data){
						this.state = res.data.state
						this.src = res.data.image
						this.code = res.data.card_no
						this.name = res.data.name
						if(this.state == 0){
							this.$showM('实名认证审核中，请勿重复提交',false)
						}else if(this.state == 1){
							this.$showM('实名认证已通过，请勿重复提交',false)
						}else if(this.state == 2){
							this.$showM('实名认证申请被驳回，请修改后重新提交',false)
						}
					}
				});
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (r) => {
						uni.showLoading({
							title:'上传中',
							mask:true
						})
						uni.uploadFile({
							url: this.$api.upload.file,
							filePath: r.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								uni.hideLoading()
								var data = JSON.parse(res.data)
								this.src = data.data.url
								console.log(this.state)
							},
							fail:(err)=>{
								this.$showM('上传失败')
								uni.hideLoading()
							}
						});
					}
				});
			},
			closeImg(){
				this.src = ''
			},
			previewImg(src){
				uni.previewImage({
					urls:[src]
				})
			},
			subAuth(){
				if(!this.name){
					this.$showM('请填写姓名',false)
					return
				}
				if(!this.code){
					this.$showM('请填写身份证号码',false)
					return
				}
				if(!this.src){
					this.$showM('请填写上传图片',false)
					return
				}
				var data = {
					name:this.name,
					card_no:this.code,
					image:this.src,
					province_id:this.placeObj.province.id,
					city:this.placeObj.city.id,
					area:this.placeObj.district.id,
					area_info:this.placeObj.province.name+','+this.placeObj.city.name+','+this.placeObj.district.name
				}
				post('member/member/auth', data, true, res => {
					this.$showM('身份信息提交成功，请等待审核',false,res=>{
						uni.navigateBack()
					})
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.rightLogo{
		width: 40upx;
		height: 40upx;
	}
	.wordBox{
		width: 660upx;
		height: 68upx;
		border-bottom: 1px solid #eee;
	}
	.uploadBox {
		border: 1px dashed #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.closeImg {
		position: absolute;
		right: -10upx;
		top: -10upx;
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
	}

	.uploadBox image {
		max-width: 100%;
		max-height: 100%;
	}

	.buyBtn {
		height: 80upx;
		line-height: 80upx;
		font-size: 32upx;
		width: 660upx;
		margin-top: 40upx;
		color: #fff;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
	}

	.passwordBox {
		width: 660upx;
		border-bottom: 1px solid #eee;
		height: 70upx;
		font-size: 30upx;
		line-height: 70upx;
	}

	.inputTitle {
		width: 660upx;
		margin-top: 40upx;
		font-size: 24upx;
		margin-bottom: 10upx;
	}

	.testImg {
		width: 250upx;
		height: 160upx;
		margin-top: 40upx;
	}

	.rzBg {
		width: 320upx;
		height: 220upx;
		margin-top: 40upx;
	}

	.fillBg {
		background: #35c292;
		height: 30upx;
		width: 100%;
	}

	.indexDatas {
		background: #fff;
		width: 750upx;
		border-radius: 30upx 30upx 0 0;
		margin-top: -30upx;
		padding: 25upx;
		overflow-x: hidden;
	}
	page{
		background: #fff;
	}
</style>
